<template>
  <van-form @submit="onSubmit">
    <div class="enter">
      <div class="header">
        <van-icon name="arrow-left" class="tubiao" @click="$router.back()" />
        <span>入驻商务部</span>
      </div>
      <div class="acticle">
        <div class="box"><span class="chunk"></span>企业资料</div>
        <van-field
          input-align="right"
          readonly
          clickable
          label="*法人类型："
          :value="legalPerson"
          placeholder="点击选择法人类型"
          :rules="[{ required: true }]"
          @click="showlegalPerson = true"
        />
        <van-popup v-model="showlegalPerson" round position="bottom">
          <van-picker
            show-toolbar
            :columns="legalTypes"
            @cancel="showlegalPerson = false"
            @confirm="onConfirm"
          />
        </van-popup>
        <van-cell-group>
          <van-field
            v-model="companyName"
            label="*企业名称："
            :rules="[{ required: true }]"
            clickable
            input-align="right"
          />
          <van-field
            input-align="right"
            v-model="showName"
            label="*显示名称："
            :rules="[{ required: true }]"
            clickable
          />
          <van-field
            input-align="right"
            v-model="credit"
            label="*社会信用代码："
            :rules="[{ required: true }]"
            label-width="110px"
            clickable
            type="number"
            maxlength="18"
            placeholder="请输入18位统一社会信用码"
          />
        </van-cell-group>

        <van-field
          input-align="right"
          :value="registrationDate"
          :rules="[{ required: true }]"
          label="*注册时间："
          clickable
          placeholder="请选择工商注册时间"
          @click="showRegistrationDate = true"
        />
        <van-popup v-model="showRegistrationDate" position="bottom">
          <van-datetime-picker
            type="date"
            title="选择年月日"
            :rules="[{ required: true }]"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="datetimePicker"
            @cancel="showRegistrationDate = false"
          />
        </van-popup>

        <van-field
          input-align="right"
          v-model="number"
          clickable
          label-width="120px"
          :rules="[{ required: true }]"
          type="number"
          label="*注册资本(万元)："
        />
        <van-field
          input-align="right"
          readonly
          clickable
          name="area"
          :value="registrationArea"
          :rules="[{ required: true }]"
          label="*注册地区："
          placeholder="点击选择省市区"
          @click="showRegistrationArea = true"
        />
        <van-popup v-model="showRegistrationArea" position="bottom">
          <van-area
            :area-list="areaList"
            @confirm="region"
            @cancel="showRegistrationArea = false"
          />
        </van-popup>

        <van-field
          input-align="right"
          readonly
          clickable
          :rules="[{ required: true }]"
          label="*企业类型："
          :value="enterpriseType"
          placeholder="点击选择企业类型"
          @click="showEnterpriseType = true"
        />
        <van-popup v-model="showEnterpriseType" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @cancel="showEnterpriseType = false"
            @confirm="EnterpriseType"
          />
        </van-popup>
        <van-cell>
          <div class="box1" slot="title">*主营业务:</div>
          <div slot="title">
            <van-tag
              ref="business"
              @click="change(index)"
              plain
              round
              v-for="(item, index) in xixi"
              :key="index"
              type="primary"
              >{{ item }}</van-tag
            >
          </div>
        </van-cell>
      </div>
      <van-button color="#3F51B5 " block type="info" native-type="submit">
        提交资料
      </van-button>
    </div>
  </van-form>
</template>
<script>
import { profession } from '@/api/job'
import Area from '../per/area'
export default {
  data () {
    return {
      xixi: [],
      minDate: new Date(1980, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      value: '',
      credit: '', // 社会信用代码
      legalPerson: '', // 法人
      companyName: '', // 企业名称
      showName: '', // 显示名称
      registrationDate: '', // 注册时间
      registrationArea: '', // 注册地区
      number: '', // 注册资本
      enterpriseType: '', // 企业类型
      showlegalPerson: false, // 控制法人类型显示与隐藏
      showEnterpriseType: false, // 控制企业类型显示与隐藏
      showRegistrationArea: false, // 控制注册地区显示与隐藏
      showRegistrationDate: false, // 控制注册时间显示与隐藏
      columns: ['有限责任公司', '股份有限公司'],
      legalTypes: ['企业法人', '机关法人', '事业单位法人', '社会团体法人', '公益法人', '盈利法人'],
      areaList: Area // 数据格式见 Area 组件文档
    }
  },
  created () {
    this.zhiye()
  },
  methods: {
    // 法人类型函数
    onConfirm (value) {
      this.legalPerson = value
      this.showlegalPerson = false
    },
    // 企业类型
    EnterpriseType (value) {
      this.enterpriseType = value
      this.showEnterpriseType = false
    },
    region (values) {
      this.registrationArea = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/')
      this.showRegistrationArea = false
    },
    datetimePicker (value) {
      var date = value
      var m = date.getMonth() + 1
      var d = date.getDate()
      if (m >= 1 && m <= 9) {
        m = '0' + m
      }
      if (d >= 0 && d <= 9) {
        d = '0' + d
      }
      var timer = date.getFullYear() + '-' + m + '-' + d
      this.registrationDate = timer
      this.showRegistrationDate = false
    },
    async zhiye () {
      const { data } = await profession()
      this.xixi = data[0].tags.splice(0, data[0].tags.length - 1)
    },
    change (index) {
      // classList属性用于在元素中添加，移除及切换 CSS 类
      // contains 该方法是判断字符串中是否有子字符串。如果有则返回true，如果没有则返回false
      if (this.$refs.business[index].classList.contains('gaoliang')) {
        this.$refs.business[index].classList.remove('gaoliang')
      } else {
        this.$refs.business[index].classList.add('gaoliang')
      }
    },
    onSubmit () {
      if (this.sy === false) {
        this.$toast('请填写必要信息')
        return
      }
      this.$toast.success('提交成功')
      this.$router.push('/')
    }
  }

}
</script>
<style lang="less">
.enter {
  background-color: #f8f8f8;
  .header {
    height: 160px;
    background-color: #3f51b5;
    color: #fff;
    font-size: 32px;
    padding-top: 20px;
    padding-left: 13px;
    span {
      position: absolute;
      top: 45px;
      left: 72px;
      padding-left: 20px;
      font-weight: 700;
    }
    .tubiao {
      position: absolute;
      top: 52px;
      left: 26px;
      padding-left: 20px;
    }
  }
  .acticle {
    border-radius: 8px;
    padding: 5px 0;
    margin-top: -56px;
    margin-left: 24px;
    width: 704px;
    background-color: #fff;
    .box {
      font-weight: 700;
      height: 88px;
      line-height: 88px;
      padding-left: 50px;
      font-size: 32px;
      border-bottom: 1px solid #f8f8f8;
      .chunk {
        position: absolute;
        top: 155px;
        left: 50px;
        width: 8px;
        height: 28px;
        background-color: #3f51b5;
      }
    }
    .van-cell {
      .box1 {
        color: #646566;
      }
      .van-cell__title {
        font-weight: 700;
        .van-tag {
          font-size: 20px;
          height: 46px;
          line-height: 46px;
          padding: 0 25px;
          margin: 10px;
          color: #a49f9f;
          font-weight: normal;
        }
      }
    }
  }

  .gaoliang {
    color: #3f51b5 !important;
  }
  .van-button {
    position: absolute;
    bottom: 0;
  }
}
</style>
